<template>
  <div>
    <div>
      <div style="height: 10px"></div>
      <div class="mgl20 title" style="margin-bottom: 4px">
        {{ category[deviceInfo.Category] }}信息
      </div>
      <van-cell-group inset>
        <van-cell title="编号" :value="deviceInfo.Code" />
        <van-cell title="名称" :value="deviceInfo.Name" />
        <van-cell
          title="管理员"
          :value="$filterUserName(deviceInfo.Principal)"
        />
        <van-cell title="场地" :value="deviceInfo.Place" />
        <van-cell title="类别" :value="deviceInfo.Type" />
      </van-cell-group>
    </div>
    <div>
      <div class="mgl20 title mgt10" style="margin-bottom: 4px">
        {{ checkType[deviceInfo.Category] }}详情
      </div>

      <van-cell-group inset>
        <div v-if="Info.type != 2">
          <van-cell title="编号" :value="Info.Number" />
          <van-cell title="方案名称" :value="Info.Name_Maintain" />
          <van-cell title="配件费用" :value="Info.Fittings" />
          <van-cell title="配件说明" :value="Info.Fittings_Remark" />
          <van-cell title="工时损失费" :value="Info.WorkHours" />
          <van-cell title="工时损失说明" :value="Info.WorkHours_Remark" />
          <van-cell title="委外费用" :value="Info.Outsource"> </van-cell>
          <van-cell title="委外说明" :value="Info.Outsource_Remark"> </van-cell>
          <van-cell title="其他费用" :value="Info.Other"> </van-cell>
          <van-cell title="其他说明" :value="Info.Other_Remark"> </van-cell>
          <van-cell title="总费用(元)" :value="Info.Total"> </van-cell>
        </div>
        <van-cell title="备注" :value="Info.Remark"> </van-cell>
        <van-cell title="创建人" :value="$filterUserName(Info.CreateUser)">
        </van-cell>
        <van-cell title="创建时间" :value="Info.CreateTime"> </van-cell>
        <van-cell title="保养结果" v-if="deviceInfo.Category == 1">
          <el-tag v-if="Info.Finish_Result == 1" effect="dark" type="success"
            >合格</el-tag
          >
          <el-tag v-if="Info.Finish_Result == 2" effect="dark" type="danger"
            >不合格</el-tag
          >
          <el-tag v-if="!Info.Finish_Result" effect="dark" type="warning"
            >{{ checkType[deviceInfo.Category] }}中</el-tag
          >
        </van-cell>
        <van-cell title="检验结果" v-if="deviceInfo.Category == 2">
          <el-tag
            v-if="Info.Finish_ResultTools == 1"
            effect="dark"
            type="success"
            >正常</el-tag
          >
          <el-tag
            v-if="Info.Finish_ResultTools == 2"
            effect="dark"
            type="danger"
            >降级</el-tag
          >
          <el-tag v-if="Info.Finish_ResultTools == 3" effect="dark" type="info"
            >报废</el-tag
          >
          <el-tag v-if="!Info.Finish_ResultTools" effect="dark" type="warning"
            >{{ checkType[deviceInfo.Category] }}中</el-tag
          >
        </van-cell>
        <Popover
          label="附件"
          Type="file"
          :required="false"
          :labelWeight="false"
          :showBtn="false"
          v-model="Files"
        />
      </van-cell-group>
    </div>
    <div style="height: 40px"></div>
  </div>
</template>
<script setup name="MaintainDetail">
import { useRoute } from 'vue-router';
import { GetMaintainDataDetail } from '@/api/teachDevice/maintain.js';
import { GetDeviceDetail } from '@/api/teachDevice/account.js';
import { category, checkType } from '@/views/Amobile/DeviceManage/conmon.js';
import { onMounted } from 'vue';
import defaultSettings from '@/settings';
const route = useRoute();
const Items = ref([]);
const Info = ref({});
const Files = ref([]);
const deviceInfo = ref({});

onMounted(() => {
  getDetail();
});

async function getDetail() {
  try {
    let res = await GetMaintainDataDetail({ ID: route.query.ID });
    Items.value = res.data.Items;
    Info.value = res.data.Info;
    Files.value = res.data.Files;
    let deviceInfoData = await GetDeviceDetail({ ID: Info.value.ID_Device });
    deviceInfo.value = deviceInfoData.data.Info;
    Info.value.type = deviceInfoData.data.Maintain?.[0]?.Type;
    document.title =
      checkType[deviceInfo.value.Category] + '详情' + ' - ' + defaultSettings.title;
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  padding-left: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #1989fa;
    border-radius: 2px;
  }
}
</style>
